/**
 * Created by huotaol on 2017/5/4.
 */

import React, {Component} from "react";
import PropTypes from "prop-types";
import {StyleSheet, Text, TextInput, View} from "react-native";
import {connect} from "react-redux";
import CustomStyle from "../../../common/style/CustomStyle";
import Button from "../../components/Button";
import * as BuyCarAction from "../../redux/action/BuyCar";
import {refreshBuyCarFilter} from "./BuyCar";

const PRICE_LIST = [];
PRICE_LIST.push({name: '5万以下', from: 0, to: 5});
PRICE_LIST.push({name: '5-10万', from: 5, to: 10});
PRICE_LIST.push({name: '10-15万', from: 10, to: 15});
PRICE_LIST.push({name: '15-20万', from: 15, to: 20});
PRICE_LIST.push({name: '20-30万', from: 20, to: 30});
PRICE_LIST.push({name: '30-50万', from: 30, to: 50});
PRICE_LIST.push({name: '50万以上', from: 50, to: '∞'});
PRICE_LIST.push({name: '不限', from: 0, to: '∞'});

class Price extends Component {

    static propTypes = {
        confirm: PropTypes.func,
    };
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            from: 0,
            to: '∞',
        };
        this._processLimitPrice = this._processLimitPrice.bind(this);
        this.renderItem = this.renderItem.bind(this);
    }

    render() {
        return (
            <View style={{backgroundColor: 'white'}}>
                <View style={{
                    flexDirection: 'row', height: CustomStyle.getActualSizeInVertical(168),
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingRight: CustomStyle.getActualSizeInHorizontal(40),
                }}>
                    <View style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                    }}>
                        <Input onChangeText={(value) => {
                            this.setState({from: value});
                        }}/>
                        <Input onChangeText={(value) => {
                            this.setState({to: value});
                        }}/>
                    </View>
                    <Button
                        containerStyle={[
                            styles.item,
                        ]}
                        style={[
                            CustomStyle.baseText,
                            styles.itemText,
                        ]}
                        text={'确定'}
                        onPress={() => {
                            console.log('confirm  ' + this.state.from + '  ' + this.state.to);
                            this._processLimitPrice(this.state.from, this.state.to);
                        }}
                    />
                </View>
                <View style={{
                    backgroundColor: '#fffcee',
                    height: CustomStyle.getActualSizeInVertical(20),
                }}>
                </View>
                <View style={{
                    flexDirection: 'row', flexWrap: 'wrap',
                    marginTop: CustomStyle.getActualSizeInVertical(20),
                }}>
                    {PRICE_LIST.map(item => this.renderItem(item))}
                </View>
            </View>
        );
    }

    renderItem(item) {
        const isSelect = false;
        return (
            <View style={[styles.itemContainer]}>
                <Button
                    containerStyle={[
                        styles.item,
                    ]}
                    style={[
                        CustomStyle.baseText,
                        styles.itemText,
                    ]}
                    text={item.name}
                    onPress={() => {
                        this._processLimitPrice(item.from, item.to);
                    }}
                />
            </View>
        );
    }

    _processLimitPrice(from, to) {
        this.props.confirm();
        this.props.updateFilter({
            begin: 0,
            total: 0,
            price: {from, to},
        });
        refreshBuyCarFilter();
    }

}

class Input extends Component {
    static propTypes = {
        onChangeText: PropTypes.func,
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
    }

    render() {
        return (
            <View style={[styles.inputContainer]}>
                <TextInput
                    style={{flex: 1, fontSize: CustomStyle.getActualFontSize(30), color: "#8c7a44",}}
                    onChangeText={(value) => {
                        this.props.onChangeText(value);
                    }}
                />
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: '#8c7a44',
                    }]}>万</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    inputContainer: {
        width: CustomStyle.getActualSizeInHorizontal(180),
        height: CustomStyle.getActualSizeInVertical(98),
        borderColor: '#ede9dc',
        borderWidth: CustomStyle.getActualSizeInVertical(1),
        borderRadius: CustomStyle.getActualSizeInVertical(4),
        flexDirection: 'row',
        alignItems: 'center',
        marginLeft: CustomStyle.getActualSizeInHorizontal(52),
    },
    input: {
        fontSize: CustomStyle.getActualFontSize(30),
    },
    confirm: {
        width: CustomStyle.getActualSizeInHorizontal(180),
        height: CustomStyle.getActualSizeInVertical(98),
        borderRadius: 4,
    },
    itemContainer: {
        height: CustomStyle.getActualSizeInVertical(108),
        width: CustomStyle.screenWidth / 3,
        justifyContent: 'center',
        alignItems: 'center',
    },
    item: {
        height: CustomStyle.getActualSizeInVertical(68),
        width: CustomStyle.getActualSizeInHorizontal(180),
        borderRadius: CustomStyle.getActualSizeInHorizontal(4),
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#ede9dd',
    },
    itemText: {
        fontSize: CustomStyle.getActualFontSize(30),
        color: '#b2a682',
    },
});


const mapStateToProps = (state) => {
    return {};
};

const mapDispatchToProps = (dispatch) => {
    return {
        updateFilter: param => dispatch(BuyCarAction.buyCarFilter(param)),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(Price);

